Visitenbuch/src/routes/(app)/entry/[id]/edit/+page.svelte

106 lines
3.1 KiB
Svelte

<script lang="ts">
import { browser } from "$app/environment";
import type { PageData } from "./$types";
import { superForm } from "sveltekit-superforms";
import { trpc } from "$lib/shared/trpc";
import { formatDate, humanDate } from "$lib/shared/util";
import { superformConfig } from "$lib/shared/util";
import PatientCard from "$lib/components/entry/PatientCard.svelte";
import Autocomplete from "$lib/components/filter/Autocomplete.svelte";
import UserField from "$lib/components/table/UserField.svelte";
import FormField from "$lib/components/ui/FormField.svelte";
import Header from "$lib/components/ui/Header.svelte";
import MarkdownInput from "$lib/components/ui/markdown/MarkdownInput.svelte";
import { SchemaNewEntryVersion } from "./schema";
export let data: PageData;
$: basePath = `/entry/${data.entry.id}`;
const {
form, errors, constraints, enhance, tainted,
} = superForm(data.form, {
validators: SchemaNewEntryVersion,
...superformConfig("Eintrag"),
});
</script>
<svelte:head>
<title>Eintrag #{data.entry.id}</title>
</svelte:head>
<Header backHref={basePath} title="Eintrag #{data.entry.id} bearbeiten" />
<p class="text-sm flex gap-2">
<span>Erstellt {humanDate(data.entry.created_at, true)}</span>
<span>·</span>
<span>
Zuletzt bearbeitet am {formatDate(data.entry.current_version.created_at, true)} von
<UserField filterName="author" user={data.entry.current_version.author} />
</span>
</p>
<PatientCard patient={data.entry.patient} />
<form method="POST" use:enhance>
<input name="old_version_id" type="hidden" value={$form.old_version_id} />
<div class="flex flex-wrap gap-2">
<FormField errors={$errors.category_id} label="Kategorie">
<Autocomplete
idInputName="category_id"
inputCls="input input-bordered w-full max-w-xs"
items={async () => trpc().category.list.query()}
onSelect={(item) => {
$form.category_id = item.id;
return { newValue: item.name ?? "", close: true };
}}
onUnselect={() => {
$form.category_id = null;
}}
selection={data.entry.current_version.category}
/>
</FormField>
<FormField errors={$errors.date} label="Zu erledigen am">
<input
name="date"
aria-invalid={Boolean($errors.date)}
type="date"
bind:value={$form.date}
{...$constraints.date}
/>
</FormField>
<div class="form-control w-full max-w-xs">
<label class="label cursor-pointer gap-2 justify-start">
<span class="label-text text-right">Priorität</span>
<input
name="priority"
class="checkbox checkbox-warning"
type="checkbox"
bind:checked={$form.priority}
/>
</label>
</div>
</div>
<MarkdownInput
name="text"
ariaInvalid={Boolean($errors.text)}
errors={$errors.text}
label="Beschreibung"
marginTop
bind:value={$form.text}
/>
<button
class="btn btn-primary max-w-32 mt-4"
disabled={browser && $tainted === undefined}
type="submit">Speichern</button
>
</form>